import React, {useState} from 'react'
import { View, Image, Text, Input } from '@tarojs/components'
import './index.scss'

export default function tieCommentsReply() {
  const [publishComments, setPublishComments] = useState('')

  const handlePublishCommentsChange = (v) => {
    console.log('评论内容：', v)
  }

  const Item = (
    <View className='comments-item'>
      <Image className='comments-avatar' src='https://636c-cloud1-6geivl0o33cc257c-1306297348.tcb.qcloud.la/avatar13.png?sign=89aea16a698bb35f1588c3d4c7c8099f&t=1642439178' mode='aspectFill'></Image>

      <View className='comments-main'>
        <View className='comments-head'>
          <View className='comments-head-info'>
            <View className='comments-head-user'>评论人</View>
            <View className='comments-head-time'>评论时间</View>
          </View>
          <View className='comments-star'>
            <Text className='iconfont icon-31dianzan'></Text>
            <Text>2</Text>
          </View>
        </View>

        <View className='comments-content'>评论内容</View>
      </View>
    </View>
  )
  return (
    <View className='tie-comments-reply'>
      <View className='tie-comments-reply-user'>
        {Item}
      </View>

      <View className='comments-list'>
        回复：
        {Item}
        {Item}
      </View>

      {/* 回复任意一个人的评论 */}
      <View className='tiezi-publish'>
        <Input
          className='tiezi-publish-input'
          placeholder='说说您的看法'
          value={publishComments}
          onInput={handlePublishCommentsChange}
        />
      </View>
    </View>
  )
}
